    document.ondragstart = function() {
        return false;
    };
    var plulist = {
        dataBase: [
            {
                'name':'dataBase',
                'next': 'lda',
                'info': {},
            }],
        cal: [
            {   'name':'lda',
                'next': 'dataProcess',
                'info': {
                },
            }],
        dataProcess: [
            {
                'next': '',
                'info': {}
            }
        ]

    }
    console.log(plulist)
    jsPlumb.ready(function () {
        // setup some defaults for jsPlumb.
        var instance = jsPlumb.getInstance({
            Endpoint: ["Dot", {radius: 2}],
            HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 2 },
            ConnectionOverlays: [
                [ "Arrow", {
                    location: 1,
                    id: "arrow",
                    length: 14,
                    foldback: 0.8
                } ],
                [ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
            ],
        });
        window.jsp = instance;

        var windows = jsPlumb.getSelector(".statemachine-demo .w");

        // initialise draggable elements.
        instance.draggable(windows);

        // bind a click listener to each connection; the connection is deleted. you could of course
        // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
        // happening.
        instance.bind("click", function (c) {
            instance.detach(c);
        });

        // bind a connection listener. note that the parameter passed to this function contains more than
        // just the new connection - see the documentation for a full list of what is included in 'info'.
        // this listener sets the connection's internal
        // id as the label overlay's text.
        instance.bind("connection", function (info) {
            info.connection.getOverlay("label").setLabel(info.connection.id);
        });
        var count= 2 ;
        var dragitem ='';
        var dragtext = '';
        $('.submenu li').mousedown(function () {
             dragtext =$(this).children('a')[0].innerText;
             $('.drag-item').html('').append('<span>'+dragtext+'</span>').show()
        })
        $('#main').mouseup(function(e){
            if(dragtext !=''){
                count = count +1
                var id = 'W'+count
                var idn = '#'+id
                console.log(dragtext)
                $('#canvas').append('<div class="w" id="'+id+'">'+dragtext+'<div class="ep"></div><div class="cancel"></div></div>')
                $(idn).css({
                    left: e.pageX -300+'px',
                    top: e.pageY + 'px',
                })
                var windows = jsPlumb.getSelector(".statemachine-demo .w");
                instance.draggable(windows);
                instance.makeSource($(idn), {
                    filter: ".ep",
                    anchor: "Continuous",
                    connector: [ "StateMachine", { curviness: 20 } ],
                    connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
                    maxConnections: 5,
                    onMaxConnections: function (info, e) {
                        alert("Maximum connections (" + info.maxConnections + ") reached");
                    }
                });

                // initialise all '.w' elements as connection targets.
                instance.makeTarget($(idn), {
                    dropOptions: { hoverClass: "dragHover" },
                    anchor: "Continuous",
                    allowLoopback: true
                });

                // and finally, make a couple of connections

                // initialise draggable elements.

                jsPlumb.fire("jsPlumbDemoLoaded", instance);
            }
            dragtext = ''
        })
        $(document).mousemove(function(e){
            console.log()
            $('.drag-item').css({
                left: e.pageX+'px',
                top: e.pageY + 'px',
            })
        })
        $(document).mouseup(function(){
            dragtext = ''
            $('.drag-item').hide()
        })
        $(document).on('click','.cancel',function () {
            instance.detachAllConnections($(this).parent().attr('id'))
            $(this).parent().remove()
        })
        // suspend drawing and initialise.
        instance.batch(function () {
            instance.makeSource(windows, {
                filter: ".ep",
                anchor: "Continuous",
                connector: [ "StateMachine", { curviness: 20 } ],
                connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
                maxConnections: 5,
                onMaxConnections: function (info, e) {
                    alert("Maximum connections (" + info.maxConnections + ") reached");
                }
            });

            // initialise all '.w' elements as connection targets.
            instance.makeTarget(windows, {
                dropOptions: { hoverClass: "dragHover" },
                anchor: "Continuous",
                allowLoopback: true
            });

            // and finally, make a couple of connections
            instance.connect({ source: "opened", target: "phone1" });
            instance.connect({ source: "phone1", target: "phone1" });
            instance.connect({ source: "phone1", target: "inperson" });
            console.log(instance.getAllConnections() )
        });
        jsPlumb.fire("jsPlumbDemoLoaded", instance);

    });
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        var icon = this.el.find('.fa-chevron-down')
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
    }

    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
        $this = $(this),
            $next = $this.next();
        $next.slideToggle();
        $this.parent().toggleClass('open');
    }
    $('.crawler-info').addClass('active')
    var accordion = new Accordion($('#accordion'), false);
    $('.link').on('click',function () {
        $('.crawler-detail').removeClass('active');
        $('.crawler-info').addClass('active');
    });
    $('.submenu').on('click','li',function(){
        $('.crawler-detail').addClass('active');
        $('.crawler-info').removeClass('active');

    });
    